<!--
 * 群组管理
 * @author: hexiaozhen
 * @since: 2023-10-31
 * index.vue
-->
<template>
  <div class="main-content">
    <a-tabs type="line" v-model="formData.viewType" @change="handleTabs">
      <a-tab-pane v-for="item in tabs" :key="item.value" :title="item.title"></a-tab-pane>
    </a-tabs>
    <!-- 搜索 -->
    <TableForm
      ref="formAndTableRef"
      :formItems="formItems"
      :formData="formData"
      :girdOption="girdOption"
      class="tableForm"
      @formChange="formChange"
      @getTableList="getTableList"
      @selectionChange="selectionChange"
      @handleBtnClick="handleBtnClick"
    >
      <!-- 自定义操作按钮 -->
      <template #tableOptate="{ record }">
        <a-button
          v-for="clickItem in tableOperateList"
          :key="clickItem.text"
          type="text"
          class="operate-item"
          :status="clickItem.eventName == 'tableDel' ? 'danger' : ''"
          @click="handleBtnClick(clickItem.eventName, record)"
        >
          {{ clickItem.text }}
        </a-button>
      </template>
      <!-- 列插槽 -->
      <template #createdTime="{ record }">
        {{ record.createdTime.slice(0, 10) }}
      </template>
    </TableForm>
    <AddEditGroup v-if="visible" v-model:visible="visible" :rowData="rowData" @submit="getTableList()"></AddEditGroup>
    <Allocation
      v-if="visibleAllocation"
      v-model:visible="visibleAllocation"
      :rowData="rowData"
      @submit="getTableList()"
    ></Allocation>
    <PersonView v-if="viewVisible" v-model:visible="viewVisible" :rowData="rowData"></PersonView>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import TableForm from '@/components/tableForm/index.vue'
import AddEditGroup from './components/addEditGroup.vue' // 新增编辑
import Allocation from './components/allocation.vue' // 分配人员
import PersonView from './components/personView.vue' // 人员视图
import system from '@/api/modules/system'
import { Modal, Message } from '@arco-design/web-vue'

const tabs = ref([
  { title: '我参与的', value: '0' },
  { title: '我管理的', value: '1' },
])
const formData = reactive({ groupName: '', viewType: '0' })
const formAndTableRef = ref()
// 表单配置
const formItems = reactive([{ name: 'groupName', label: '群组名称', type: 'a-input' }])
const girdOption = reactive({
  btnList: [],
  columns: [
    { title: '序号', slotName: 'serialNumber', width: 70 },
    { title: '群组编号', dataIndex: 'groupCode', width: 202 },
    { title: '群组名称', dataIndex: 'groupName', width: 100 },
    { title: '群组来源', dataIndex: 'groupOrigin', width: 100 },
    { title: '群组维护人', dataIndex: 'groupOwnerName', width: 120 },
    { title: '备注', dataIndex: 'remark', width: 100 },
    { title: '创建时间', slotName: 'createdTime', width: 125 },
    { title: '操作', slotName: 'optional', width: 235, fixed: 'right', hide: true },
  ],
  loading: false,
  tableSlotList: ['createdTime'], //表格插槽
  tableId: 'groupId', //表格唯一标识符类似于id
  customHeight: 'calc(100% - 56px)',
})
const handleTabs = (val) => {
  if (val === '0') {
    girdOption.rowSelection = false
    girdOption.btnList = []
    girdOption.columns[girdOption.columns.length - 1].hide = true
  } else {
    girdOption.btnList = [
      { name: '新增', eventName: 'add', type: 'icon-xinzeng' },
      { name: '删除', status: 'danger', eventName: 'delMultiple', type: 'icon-shanchu' },
    ]
    girdOption.columns[girdOption.columns.length - 1].hide = false
    girdOption.rowSelection = true
  }
  formData.viewType = val
  formAndTableRef.value.setPageCurrent(1) // 设置表格分页器分页为1
  getTableList({ pageSize: 10, current: 1 })
}
// 表格操作插槽
const tableOperateList = reactive([
  { text: '分配人员', eventName: 'allocation' },
  { text: '查看', eventName: 'personView' },
  { text: '修改', eventName: 'tableEdit' },
  { text: '删除', eventName: 'tableDel' },
])
let visible = ref(false) // 新增编辑弹窗
let rowData = reactive({ type: 'add' }) // 弹窗数据

let visibleAllocation = ref(false) // 分配人员
let viewVisible = ref(false) // 人员视图

let selectionList = [] // 多选数据
const handleBtnClick = (type, row) => {
  switch (type) {
    case 'add': {
      // 新增
      rowData = { type: 'add' }
      visible.value = true
      break
    }
    case 'delMultiple': {
      //批量删除
      if (!selectionList.length) {
        return Message.warning('请先选择表格数据！')
      }
      Modal.open({
        title: '警告',
        content: `是否确认批量删除已选数据项？`,
        draggable: true,
        onOk: () => {
          delGroup(selectionList.join(','))
        },
      })
      break
    }
    case 'tableEdit': {
      //编辑
      visible.value = true
      rowData = { ...row, type: 'edit' }
      break
    }
    case 'allocation': {
      // 分配人员
      visibleAllocation.value = true
      rowData = { ...row }
      break
    }
    case 'personView': {
      // 人员视图
      viewVisible.value = true
      rowData = { ...row }
      break
    }
    case 'tableDel': {
      //删除
      Modal.open({
        title: '警告',
        content: `是否确认删除群组名称、群组编号为${row.groupName}、${row.groupCode}的数据项？`,
        draggable: true,
        onOk: () => {
          delGroup(row.groupId)
        },
      })
      break
    }
  }
}
const delGroup = (id) => {
  system.delGroup(id).then((res) => {
    getTableList()
    Message.success(res.msg)
  })
}
const formChange = (prop) => {
  // 部门筛选直接掉列表接口
  if (prop === 'deptId') {
    formAndTableRef.value.setPageCurrent(1) // 设置表格分页器分页为1
    getTableList({ pageSize: 10, current: 1 })
  }
}
// 获取表格数据
let requestParam = {}
const getTableList = (pageConfig) => {
  if (pageConfig) {
    requestParam.size = pageConfig.pageSize
    requestParam.current = pageConfig.current
  }
  girdOption.loading = true
  formAndTableRef.value.setTableData([], 0)
  system
    .getGroup({ ...formData }, requestParam)
    .then((res) => {
      formAndTableRef.value.setTableData(res.data.records, Number(res.data.total))
      girdOption.loading = false
    })
    .catch(() => {
      girdOption.loading = false
    })
}
// 多选
const selectionChange = (list) => {
  selectionList = list
}
onMounted(() => {
  getTableList({ pageSize: 10, current: 1 })
})
</script>
